import 'package:flutter/material.dart';
import 'package:my_app/common/common.dart';

class Divice extends StatefulWidget {
  const Divice({Key? key}) : super(key: key);

  @override
  State<Divice> createState() => _DiviceState();
}

class _DiviceState extends State<Divice> {
  // button 文字样式
  TextStyle _buttonTextStyle = TextStyle(
    fontSize: 14.0,
    color: Colors.red,
  );
  // button 样式
  ButtonStyle _buttonStyle = TextButton.styleFrom(
    backgroundColor: Color(Common.muji),
    padding: EdgeInsets.all(5),
  );

  @override
  Widget build(BuildContext context) {
    MediaQueryData mq;
    mq = MediaQuery.of(context);

    /// 安全内容高度(包含 AppBar 和 BottomNavigationBar 高度)
    double safeContentHeight =
        mq.size.height - mq.padding.top - mq.padding.bottom;

    /// 实际的安全高度
    double safeHeight =
        safeContentHeight - kToolbarHeight - kBottomNavigationBarHeight;
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        SizedBox(
          height: 80,
        ),
        Container(
          child: Container(
            width: 100,
            child: Text(
              "屏幕密度:${mq.devicePixelRatio}",
              style: _buttonTextStyle,
            ),
          ),
        ),
        Container(
          width: 100,
          child: Container(
            child: Text(
              "屏幕宽:${mq.size.width}",
              style: _buttonTextStyle,
            ),
          ),
        ),
        Container(
          width: 100,
          child: Container(
            child: Text(
              "屏幕宽:${mq.size.width}",
              style: _buttonTextStyle,
            ),
          ),
        ),
        Container(
          width: 100,
          child: Container(
            child: Text(
              "屏幕高:${mq.size.height}",
              style: _buttonTextStyle,
            ),
          ),
        ),
        Container(
          width: 100,
          child: Container(
            child: Text(
              "顶部状态栏:${mq.padding.top}",
              style: _buttonTextStyle,
            ),
          ),
        ),
        Container(
          width: 100,
          child: Container(
            child: Text(
              "底部功能栏:${mq.padding.bottom}",
              style: _buttonTextStyle,
            ),
          ),
        ),
        Container(
          width: 200,
          child: Container(
            child: Text(
              "安全内容高度:${safeContentHeight}",
              style: _buttonTextStyle,
            ),
          ),
        ),
        Container(
          width: 200,
          child: Container(
            child: Text(
              "实际安全内容高度:${safeHeight}",
              style: _buttonTextStyle,
            ),
          ),
        ),
        Container(
          width: 200,
          decoration: new BoxDecoration(
            color: Colors.grey,
          ),
          child: Container(
            child: Text(
              "200",
              style: _buttonTextStyle,
            ),
          ),
        ),
        SizedBox(
          height: 20,
        ),
        Container(
          width: 400,
          decoration: new BoxDecoration(
            color: Colors.grey,
          ),
          child: Container(
            child: Text(
              "400",
              style: _buttonTextStyle,
            ),
          ),
        ),
        SizedBox(
          height: 20,
        ),
        Container(
          width: 600,
          decoration: new BoxDecoration(
            color: Colors.grey,
          ),
          child: Container(
            child: Text(
              "600",
              style: _buttonTextStyle,
            ),
          ),
        ),
        SizedBox(
          height: 20,
        ),
        Container(
          width: 1000,
          decoration: new BoxDecoration(
            color: Colors.grey,
          ),
          child: Container(
            child: Text(
              "1000",
              style: _buttonTextStyle,
            ),
          ),
        ),
        SizedBox(
          height: 20,
        ),
        Container(
          width: 1200,
          decoration: new BoxDecoration(
            color: Colors.grey,
          ),
          child: Container(
            child: Text(
              "1200",
              style: _buttonTextStyle,
            ),
          ),
        ),
        SizedBox(
          height: 20,
        ),
        Container(
          width: 1440,
          decoration: new BoxDecoration(
            color: Colors.grey,
          ),
          child: Container(
            child: Text(
              "1440",
              style: _buttonTextStyle,
            ),
          ),
        ),
        SizedBox(
          height: 20,
        ),
        Container(
          width: 2160,
          decoration: new BoxDecoration(
            color: Colors.grey,
          ),
          child: Container(
            child: Text(
              "2160",
              style: _buttonTextStyle,
            ),
          ),
        ),
        Wrap(
          children: [
            Container(
              width: 200,
              decoration: new BoxDecoration(
                color: Colors.grey,
              ),
              child: Text('123'),
            ),
            Container(
              width: 400,
              decoration: new BoxDecoration(
                color: Colors.grey,
              ),
              child: Text('123'),
            ),
          ],
        ),
        // Container(
        //   width: 100,
        //   child: TextButton(
        //     style: _buttonStyle,
        //     child: Text(
        //       "获取设备信息",
        //       style: _buttonTextStyle,
        //     ),
        //     onPressed: () => {
        //       mq = MediaQuery.of(context),
        //       print(mq.size.width)
        // 屏幕密度
        // var pixelRatio = mq.devicePixelRatio,
        // print("屏幕密度");
        // print(pixelRatio);
        // // 屏幕宽(注意是dp, 转换px 需要 screenWidth * pixelRatio)
        // var screenWidth = mq.size.width;
        // print("屏幕宽");
        // print(screenWidth);
        // // 屏幕高(注意是dp)
        // var screenHeight = mq.size.height;
        // print("屏幕高");
        // print(screenHeight);
        // // 顶部状态栏, 随着刘海屏会增高
        // var statusBarHeight = mq.padding.top;
        // print("顶部状态栏");
        // print(statusBarHeight);
        // // 底部功能栏, 类似于iPhone XR 底部安全区域
        // var bottomBarHeight = mq.padding.bottom;
        // print("底部功能栏");
        // print(bottomBarHeight);
        //     },
        //   ),
        // ),
      ],
    );
  }
}
